<template>
  <v-navigation-drawer
    v-model="drawer"
    :rail="rail"
    permanent
    @click="rail = false"
  >
    <v-list-item
      prepend-avatar="https://randomuser.me/api/portraits/men/85.jpg"
      title="admin"
      nav
    >
      <template v-slot:append>
        <v-btn
          variant="text"
          icon="mdi-chevron-left"
          @click.stop="rail = !rail"
        ></v-btn>
      </template>
    </v-list-item>

    <div class="bg-emerald-500 rounded-full text-center">能耗监测</div>
    <div class="tabs">
      <v-tabs bg-color="info">
        <v-tab v-for="item in buttonName" :key="item.index">{{ item }}</v-tab>
      </v-tabs>
    </div>

    <v-list nav density="compact">
      <v-list-item prepend-icon="mdi-clock-start" title="Clock-in" value="电表1"
        >电表1</v-list-item
      >
      <v-list-item prepend-icon="mdi-clock-start" title="Clock-in" value="电表2"
        >电表2</v-list-item
      >
      <v-list-item prepend-icon="mdi-clock-start" title="Clock-in" value="电表3"
        >电表3</v-list-item
      >
    </v-list>
  </v-navigation-drawer>
</template>

<script>
export default {
  setup() {
    const rail = ref(true);
    const drawer = ref(true);
    const buttonName = ["水", "电", "气"];

    return { drawer, buttonName, rail };
  },
};
</script>
